<template>
	<view style="width:100%">
		<view class="product-box">
			<view class="product-item" v-for="item in data" :key="item.id">
        <view class="item-url" @click="goproduct(item.id)">
          <uni-row>
            <uni-col :span="7">
              <!--              <image :src="imgurl+item.carTypePic" style="width: 100%;height: 200rpx;border-radius: 10px"></image>-->
              <view class="horizontal-vertical good-height">
                <view style="width: 100%">
                  <image :src="imgurl+item.pic"
                         class="image-vehicle" v-if="item.pic"></image>
                  <image src="../../static/images/default/cdxny_20240416144029.png"
                         class="image-vehicle" v-else/>
                </view>
              </view>
            </uni-col>
            <uni-col :offset="1" :span="16">
              <view class="detail">
                <view class="name">
                  {{ item.name }}
                </view>
                <view class="tag-box">
                  <!--                  <uni-tag :inverted="true" type="primary" :text="item2" v-for="(item2,index) in item.vehicleParams"-->
                  <!--                           size="mini" :key="index" v-if="item2" class="tag">-->
                  <!--                  </uni-tag>-->
                  <text v-for="(item2,index) in item.vehicleParams" class="tag" :key="index">{{ item2 }}</text>
                </view>
                <!--                <view class="fraction">-->
                <!--                  <text class="fraction-score">5.0</text>-->
                <!--                  <text class="fraction-comments">很棒</text>-->
                <!--                  <text class="fraction-detail">{{ item.shopName }}</text>-->
                <!--                </view>-->
                <view class="distance">
                  <text v-if="item.openAppointment">定金找车，预约成功后会退还定金</text>
                  <!--                  直线距离{{ (item.distance / 1000).toFixed(1) }}公里·-->
                  <!--                  {{ item.shopAddress }}-->
                </view>
              </view>
              <view class="price">
                <view>
                </view>
                <!--                  <view>-->
                <!--                    <text style="color: #B3B3B3;text-decoration:line-through">日常价{{ item.money }}</text>-->
                <!--                  </view>-->
                <view class="buy-price">
                  <view>
                    <text class="unit">
                      {{ item.openAppointment ? '定金 ' : ' ' }} &nbsp;
                    </text>
                    <text class="money" v-if="item.openAppointment">
                      ￥{{ item.appointmentFee }}
                    </text>
                    <text class="money" v-else>
                      <text style="font-size: 12px;margin-right: 2px">¥</text>
                      {{ item.money }}/天
                    </text>
                  </view>
                  <!--                  <view class="totalPrice">-->
                  <!--                    <uni-icons type="help" size="14" color="#555555" @tap.stop="showDetail(item)"/>-->
                  <!--                    总价 ¥{{ getTotalMoney(item) }}-->
                  <!--                  </view>-->
                </view>
              </view>
            </uni-col>
          </uni-row>
				</view>
			</view>
		</view>
    <uni-popup type="bottom" ref="showDetail">
      <view class="total-money-detail">
        <view class="title">总价说明</view>
        <view class="label">
          车辆租金 日租¥{{ cost.money }}
          <view class="detail">
            <text>租车费</text>
            <text>¥{{ cost.totalDayMoney }}</text>
          </view>
        </view>
        <view class="label">
          服务/手续费
          <view class="detail">
            <text>车行手续费（含车辆清洁、单据打印等）</text>
            <text>¥{{ cost.fee }}</text>
          </view>
        </view>
        <view class="label">
          车行保障服务费
          <view class="detail">
            <text>基础服务费（含车损、第三者责任保障）</text>
            <text>¥{{ cost.serviceFee }}</text>
          </view>
        </view>
        <view class="show-money">
          总价
          <text class="total-money">
            <text class="unit">¥</text>
            {{ cost.totalMoney }}
          </text>
        </view>
        <view class="detail-bottom">
          <button @click="goproduct(cost.id)">下 单</button>
        </view>
      </view>

    </uni-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
        imgurl: '',
        cost: {
          serviceFee: 0,
          zxServiceFee: 0,
          zxAppointmentFee: 0,
          money: 0,
          totalDayMoney: 0,
          fee: 0,
          totalMoney: 0,
          id: 0,
        }
			}
		},
		// onShow() {
		// 	console.log(getApp().globalData.imgUrl);
		// 	this.imgurl = getApp().globalData.imgUrl
		// },
		created() {
			console.log(getApp().globalData.imgUrl);
			this.imgurl = getApp().globalData.imgUrl
		},
		props: {
      data: {},
      diffDay: {}
		},
		methods: {
      showDetail(item) {
        console.log(item)
        this.cost.money = item.money
        this.cost.totalDayMoney = (item.money * this.diffDay).toFixed(2)
        this.cost.fee = item.fee
        this.cost.serviceFee = (item.serviceFee * this.diffDay).toFixed(2)
        this.cost.totalMoney = this.getTotalMoney(item)
        this.cost.id = item.id
        this.$refs.showDetail.open()
      },
      getTotalMoney(item) {
        return (this.diffDay * item.money + item.fee + item.serviceFee * item.money).toFixed(2)
      },
			goproduct(id) {
				console.log(id);
				this.$emit('goproduct', id)
			}

		}
	}
</script>
<style lang="less">
	.product-item {
    //margin-top: 12rpx;
		padding: 0;
		width: 100%;
    border-bottom: 4px solid #f1f5f8;

		.item-url {
			width: 100%;
			// display: inline-block;
			position: relative;
			background: #fff;
			// display: flex;
			border-radius: 10rpx;
      padding: 8rpx 5rpx;
			// align-items: center;


			.item-pic {
				// width: 35%;
				/* height: 0; */
				overflow: hidden;
				background: #ffffff;
				// padding-bottom: 30%;
				position: relative;
				border-radius: 4px;
				display: flex;
				padding: 30upx 20upx 30upx 20upx;

				image {
					// position: absolute;
					// top: 10rpx;
					// left: 10rpx;
					width: 200upx;
					height: 120upx;
				}

				.name {
					color: #323232;
					font-weight: bold;
					font-size: 28rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
					overflow: hidden;
				}

				.lable {
					margin-top: 20upx;
					.lable-item2 {
						// background: #efefef;
						font-size: 12px;
						color: rgb(51, 136, 255);
						display: inline-block;
						margin: 0 5rpx 5rpx 0;
						margin-right: 8rpx;
						border-radius: 6rpx;
						font-weight: 400;
						padding: 4rpx 8rpx;
					}
				}
			}

			.border-efefef {
				height: 3upx;
				background-color: #efefef;
				margin: 15upx;
				margin-top: 0;

			}

			.item-info {
				// width: 70%;
				padding: 6rpx 10rpx 5rpx 20rpx;
				position: relative;
        left: 40rpx;
				.price {
					// margin-top: 10rpx;
					overflow: hidden;

					.yuan {
						float: right;
						color: red;
						font-size: 36upx;
					}

					.te {
						margin-left: 10rpx;
						font-size: 24rpx;
						color: #aaa;
						text-decoration: line-through;
					}
				}
			}
		}
	}

  .good-height {
    min-height: 140rpx;
  }

  .image-vehicle {
    margin-top: 30rpx;
    height: 180rpx;
    border-radius: 10rpx;
    width: 100%;
  }

  .horizontal-vertical {
    height: 100%;
    width: 100%;
    flex-direction: column;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail {
    width: 100%;
    padding: 20rpx 0;

    > view {
      margin-bottom: 1px;
    }
    .name {
      font-size: 38rpx;
      height: 50rpx;
      text-overflow: ellipsis;
      overflow: hidden;
      align-items: center;
      word-break: break-all;
      white-space: nowrap;
      //-webkit-box-orient: vertical; /* 设置盒模型的方向为垂直 */
    }

    .tag-box {
      font-size: 28rpx;
      padding: 3px 1px 2px 0;
      white-space: nowrap;
      overflow-x: hidden;
      text-overflow: ellipsis;
      color: #555555;
    }

    .tag:not(:last-child):after {
      margin: auto 2px;
      content: '/';
      color: #d3d3d3;
    }
    .distance {
      width: 100%;
      white-space: nowrap;
      font-size: 26rpx;
      color: #9a9a9a;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .fraction {
      font-size: 24rpx;
      color: rgb(0, 78, 184);

      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;

      &-score {
        padding: 2rpx 10rpx;
        border-radius: 5px 1px 5px 5px;
        background: rgb(0, 78, 184);
        color: white;
      }

      &-comments {
        padding: 1rpx 15rpx 1rpx 5rpx;
        background: rgba(0, 78, 184, 0.2);
        border-radius: 0 40% 40% 0;
      }

      &-detail {
        margin-left: 10rpx;
      }
    }

  }

  .totalPrice {
    color: #555555;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .price {
    width: 98%;
    display: flex;
    align-items: end;
    justify-content: flex-end;
    position: relative;
    //position: absolute;
    //bottom: 5rpx;
    margin: 0 0 5rpx;
    padding: 10rpx 25rpx;
    //border-radius: 100rpx;

    height: 90rpx;
    //background: linear-gradient(to right, rgba(254, 242, 236, 1), rgba(254, 242, 236, 0.3) 65%);

    .introduction {
      color: #ea592c;
      font-size: 12px;
    }

    .buy-price::before {
      position: absolute;
      content: '>';
      font-weight: bold;
      font-size: 12px;
      color: #036ef4;
      right: 0;
    }

    .buy-price {
      height: 100%;
      //background: linear-gradient(to left bottom, rgba(234, 26, 71, 1), rgba(234, 26, 71, 0.6));
      padding-right: 5%;
      position: absolute;
      right: 0;
      top: 0;
      font-size: 36rpx;
      flex-direction: column;
      display: flex;
      align-items: flex-end;
      justify-content: center;


      color: #fff;
      border-radius: 0 100rpx 100rpx 0;

      .money {
        color: #036ef4;
        font-size: 14px;
        font-weight: bold;
      }

      .unit {
        font-size: 10px;
        color: #036ef4;
      }

      &-detail {
        font-size: 24rpx;
      }
    }

    //background-color: rgba(113, 183, 251, 0.2);
  }


  .total-money-detail {
    display: flex;
    flex-direction: column;
    font-size: 16px;
    padding: 20rpx 20rpx 180rpx;
    gap: 10px;
    background: #fff;
    border-radius: 25rpx 25rpx 0 0;
    position: relative;


    .title {
      text-align: center;
      font-weight: bold;
    }

    .label {
      font-size: 14px;
      font-weight: bold;

      .detail {
        font-size: 12px;
        font-weight: initial;
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }

    .show-money {
      padding: 20rpx 0;
      border-top: 2px solid #f1f5f8;
      text-align: right;
      font-weight: bold;

      .total-money {
        color: #036ef4;

        .unit {
          margin-left: 10rpx;
          font-size: 12px;
        }
      }
    }

    .detail-bottom {
      box-shadow: 0 -2px 4px rgba(50, 50, 50, 0.3);
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 160rpx;


      button {
        margin: 10rpx auto;
        background: #036ef4;
        width: 90vw;
        color: #fff;
      }
    }
  }

</style>